<template>
  <!-- 弹窗组件 -->
  <el-button type="primary" @click="assignPermission">分配权限</el-button>

  <el-dialog v-model="showAssign" title="分配权限" @close="closeDialog">
    <el-tree
      ref="permissionTree"
      :data="data"
      :check-strictly="isBind"
      show-checkbox
      node-key="pid"
      :default-expand-all="true"
      :default-checked-keys="defaultKeyList"
      :props="defaultProps"
    />

    <template #footer>
      <span class="dialog-footer">
        <el-button type="info" @click="concelAssignPermissions(0)"
          >取消</el-button
        >
        <el-button type="warning" @click="concelAssignPermissions(1)">
          重置
        </el-button>
        <!-- 修改角色信息 -->
        <el-button type="primary" @click="concelAssignPermissions(2)">
          确认提交
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
export default {
  name: "Role",
  components: {},
  data() {
    return {
      // 存放变量，如下（数组，字符串，数字，对象）
      defaultProps: {
        children: "children",
        label: "pname",
      },
      data: [],
      // 默认选中的节点pid数组；
      defaultKeyList: [],

      showAssign: false,

      // 父节点与子节点是否关联
      isBind: false,

      // 半选中数组；
      halfCheckedKeys: [],

      // 全选中数组；
      checkedKeys: [],

      id: "",
    };
  },
  // 声明方法
  methods: {
    // 分配权限的三个按钮；
    concelAssignPermissions(flag) {
      if (flag == 0) {
        // 取消：重置数据，并退出弹窗；
        alert("正在取消，并退出");
        // 设置退出弹窗
        this.showAssign = false;
        // 重置数据；
        this.init();
      } else if (flag == 1) {
        // 重置： 重置数据；
        alert("正在重置数据");
        this.init();
      } else if (flag == 2) {
        // 确认提交:保存数据，并退出
        alert("正在确认提交数据");
        // 获取最新的数据；
        let permissionPidList = [];
        // this.$nextTick(() => {
        alert(
          "返回当前选中节点 key 的数组 = " +
            this.$refs.permissionTree.getCheckedKeys()
        );
        alert(
          "查看选择keys的数组 = " +
            this.$refs.permissionTree.getHalfCheckedKeys()
        );

        this.halfCheckedKeys = [];
        // this.halfCheckedKeys = this.halfCheckedKeys.unshift(this.$refs.permissionTree.getHalfCheckedKeys());
        this.halfCheckedKeys = this.$refs.permissionTree.getHalfCheckedKeys();

        this.checkedKeys = [];
        // this.checkedKeys = this.checkedKeys.unshift(this.$refs.permissionTree.getCheckedKeys());
        this.checkedKeys = this.$refs.permissionTree.getCheckedKeys();

        alert(this.halfCheckedKeys + "=值=" + this.checkedKeys);
        permissionPidList = this.checkedKeys;
        alert("确定提交" + permissionPidList[0]);
        // });

        let obj = {
          list: permissionPidList,
          id: this.id,
        };
        console.log(obj);
        // 发送提交请求；角色-权限；
        this.$axios({
          url: "/admin/rolePermission/updateRolePermissionPid",
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: JSON.stringify(obj),
        }).then((res) => {
          alert(res.data);
          if (res.data == true) {
            alert("角色-权限 修改成功！");
          }
          // 刷新数据
          this.init();
          // 设置退出弹窗
          this.showAssign = false;
        });
      }
    },
    // 开启分配权限的弹窗
    assignPermission() {
      this.showAssign = true;
    },
    // 数据初始化；
    init() {
      // 渲染树结构
      this.$axios({
        url: "/admin/permission/selectPermissionInfo",
        methods: "post",
      }).then((res) => {
        this.data = [];
        this.data = res.data;
      });
      // 数据渲染时，取消关联
      this.isBind = true;
      //
      this.id = 0;
      // 渲染树选择的数据；
      this.$axios({
        url: "/admin/rolePermission/selectPermissionPid",
        methods: "post",
        params: {
          rid: this.id,
        },
      }).then((res) => {
        let list = res.data;
        this.defaultKeyList = [];
        for (let i = 0; i < list.length; i++) {
          this.defaultKeyList.unshift(list[i].pid);
          console.log(list[i].pid);
        }
      });
      this.$nextTick(() => {
        // 数据渲染完成，和用户交互；
        this.isBind = false;
      });
    },
    // 弹窗关闭时回调
    closeDialog() {
      this.init();
    },
  },
  created() {
    this.init();
  },
};
</script>

<!-- 当前组件的样式, 设置scoped, 可以保证样式只对当前页面有效 -->
<style scoped>
.tree-wrapper {
  max-width: 500px;
}

.label {
  font-size: 14px;
}

.el-button--text {
  margin-right: 15px;
}

.el-input {
  width: 300px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
